<template>
  <div>
    <!--筛选条件-->
    <div class="blockMould">
      <screeningCriteria class="search_lists" :projectList='projectList'
                         :founderList='founderList'
                         :handlerList='handlerList'
                         :workOrderStatusList="workOrderStatusList"
                         :workOrderTypeList="workOrderTypeList"
                         @project="project"
                         @founder="founder"
                         @handler="handler"
                         @workOrderStatus="workOrderStatus"
                         @workOrderType="workOrderType"
                         @creationTime="creationTime"
                         ref="resetFun"
      ></screeningCriteria>
    </div>

    <div class="list blockMould work_list">
      <!--行为按钮-->
      <div class="behavior">
        <div style="display: flex;justify-content: flex-end;">
          <el-button type="primary" size="small" @click="requestData">查询</el-button>
          <el-button size="small" @click="reset">重置</el-button>
        </div>
      </div>
      <!--表格-->
      <el-table
        :header-cell-style="{background:'#F6F7FB',color:'#666666',height: '50px'}"
        :data="tableData">
        <el-table-column label="工单编号" prop="workOrderId" min-width="70" align="center"></el-table-column>
        <el-table-column label="项目" prop="productName" min-width="80"></el-table-column>
        <el-table-column
          label="工单标题">
          <template slot-scope="scope">
            <div @click="workOrderDetails(scope.row)" style="color: rgba(42, 130, 226, 1);cursor:pointer">
              {{scope.row.workOrderTitle}}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="工单内容" prop="workOrderDesc"></el-table-column>
        <el-table-column label="工单类型" prop="workOrderType" min-width="60"></el-table-column>
        <el-table-column
          label="工单状态"
          min-width="58">
          <template slot-scope="scope">
            <div v-if="scope.row.workOrderStatus=='0'">
              <span style="background-color: rgba(145, 147, 152, 0.2);color: #919398;">待处理</span>
            </div>
            <div v-if="scope.row.workOrderStatus=='1'">
              <span style="background-color: rgba(26, 179, 148, 0.2);color:rgba(26, 179, 148, 1)">已处理</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="创建人" prop="createRepName" min-width="50"></el-table-column>
        <el-table-column label="创建时间" prop="sysInsert" min-width="108"></el-table-column>
        <el-table-column label="当前处理人" prop="dealRepName" min-width="65"></el-table-column>
      </el-table>
      <!--分页-->
      <pagination :page="page" @changeCurrentPage="handleCurrentChange" @changePageSize="handlePageSize"/>
    </div>
  </div>
</template>

<script>
  import pagination from '../public/pagination';
  import screeningCriteria from '../components/workOrderScreeningCriteria';
  import {baseAjax} from "@/api/api";
  import {statusCode} from "@/utils";

  export default {
    components: {pagination, screeningCriteria},
    data() {
      return {
        //项目
        returnProject: '',
        projectList: [],
        //创建人
        returnFounder: '',
        founderList: [],
        //当前处理人
        returnHandler: '',
        handlerList: [],
        //工单状态
        returnWorkOrderStatus: '',
        workOrderStatusList: [
          {
            id: 0,
            name: '待处理',
          }, {
            id: 1,
            name: '已处理',
          }
        ],
        //工单类型
        returnWorkOrderType: '',
        workOrderTypeList: [],
        //创建时间
        returnCreationTime: '',
        //表格
        tableData: [],
        //分页
        page: {
          currentPage: 1,    //当前页
          pageSize: 10,    //每页显示条数
          totalPage: 0,   //总页数
          total:null   //总条数
        },
      }
    },
    mounted() {
      this.requestData()
      this.allProjects()
      this.work_order_type()
      this.allFounderHandler()
    },
    methods: {
      data() {
        let obj = {
          //创建代表ID
          createRepId: this.returnFounder.id,
          //处理代表ID
          dealRepId: this.returnHandler.id,
          //产品ID
          productId: this.returnProject.id,
          startTime: this.returnCreationTime[0],
          endTime: this.returnCreationTime[1],
          repIdWorkOrderAboutMe: null,
          repIdWorkOrderCreateByMe: null,
          workOrderStatus: this.returnWorkOrderStatus.id,
          workOrderTypeId: Number(this.returnWorkOrderType.resourceValue),
          currentPage: this.page.currentPage,
          pageSize: this.page.pageSize,
          totalPage: this.page.totalPage,
        }
        return obj
      },
      //显示数据
      requestData() {
        let obj = this.data()
        let all_work_order = {
          url: '/work_order/all_work_order',
          method: 'POST',
        }
        baseAjax(all_work_order, obj, (res) => {
          if (res.code == 200) {
            this.tableData = res.data.workOrderInfoListResponseList
            this.page.totalPage = res.data.totalPage
            this.page.total = res.data.count
          }
        })
      },
      //当前页
      handleCurrentChange(currentPage) {
        this.page.currentPage = currentPage;
        this.requestData()
      },
      //改变每页条数
      handlePageSize(pageSize){
        this.page.pageSize = pageSize;
        this.requestData();
      },
      //获取所有项目
      allProjects() {
        let getAllProductInfo = {
          url: '/product/getAllProductInfo',
          method: 'POST',
        }
        baseAjax(getAllProductInfo, '', (res) => {
          if (res.code == statusCode.success) {
            this.projectList = res.data
          }
        })
      },
      //项目返回值
      project(value) {
        this.returnProject = value
      },
      //所有创建人、当前处理人
      allFounderHandler() {
        let electAllRepList = {
          url: '/representative/selectAllRepList',
          method: 'GET',
        }
        baseAjax(electAllRepList, '', (res) => {
          if (res.code == statusCode.success) {
            this.founderList = res.data
            this.handlerList = res.data
          }
        })
      },
      //创建人返回值
      founder(value) {
        this.returnFounder = value
      },
      //当前处理人返回值
      handler(value) {
        this.returnHandler = value
      },
      //工单状态返回值
      workOrderStatus(value) {
        this.returnWorkOrderStatus = value
      },
      //获取所有工单类型
      work_order_type() {
        let work_order_type = {
          url: '/resource/getReourceItem/work_order_type',
          method: 'GET',
        }
        baseAjax(work_order_type, '', (res) => {
          if (res.code == statusCode.success) {
            this.workOrderTypeList = res.data
          }
        })
      },
      //工单类型返回值
      workOrderType(value) {
        this.returnWorkOrderType = value
      },
      //创建时间返回值
      creationTime(value) {
        this.returnCreationTime = value
      },
      //重置方法调用
      reset() {
        this.$refs.resetFun.resetFun();
        setTimeout(() => {
          this.requestData()
        }, 10)
      },
      //工单详情
      workOrderDetails(value) {
        this.$router.push('/workOrderDetails?workOrderId=' + value.workOrderId)
      }
    }
  }
</script>

<style lang="less" scoped>
  /deep/.el-input.el-input--suffix.is-focus>.el-input__inner{
    border-color:#2A82E2;
  }
  /deep/.el-range-editor.is-active{
    border-color:#2A82E2 !important;
  }
  //筛选条件
  .search_list {
    display: inline-block;
    margin-right: 15px;
    align-items: center;
    font-family: PingFangSC-Regular, PingFang SC;

    .search_text {
      font-size: 14px;
      font-weight: 400;
    }
  }

  //行为按钮
  .behavior {
    margin-bottom: 17px;
    overflow: hidden;

    .el-button {
      height: 32px;
      border-radius: 2px;
      padding:0 18px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      display:inline-flex;
      justify-content:center;
      align-items:center;
    }

    button:first-child{
      background-color: rgba(42, 130, 226, 1);
      border-color:transparent;
    }
    button:first-child:hover{
      background-color:rgba(42, 130, 226, 0.7);
    }
    button:first-child:active{
      background-color: #1F6DC3;
    }
    button:last-child{
      border: 1px solid #DDDFE6;
      color: rgba(0, 0, 0, 0.7);
      margin-left:8px;
    }
    button:last-child:hover{
      color: #2A82E2;
      background-color:#fff;
    }
  }

  .blockMould{
    border-radius: 2px;
    box-sizing:border-box;
    .search_lists{
      display:flex;
      .search_list{
        margin:0 0 14px 0;
      }
    }
  }

  .work_list{
    /deep/.el-table{
      thead{
        tr{
          th{
            .cell{
              font-size: 14px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
            }
          }
          th:first-child{
            padding-left:0;
          }
        }
      }
      tbody{
        tr{
          td:first-child{
            padding-left:0;
          }
          td:nth-child(6){
            .cell{
              div{
                span{
                  display:inline-block;
                  height: 20px;
                  line-height:20px;
                  padding:0 9px;
                }
              }
            }
          }
        }
      }
    }
  }
</style>
